<template>
  <div class="login-container">
    <!-- 主题切换按钮 -->
    <div class="theme-toggle" @click="toggleTheme">
      <BulbOutlined v-if="appStore.theme === 'light'" />
      <BulbFilled v-else />
    </div>

    <!-- 科技背景层（天蓝主题） -->
    <div class="tech-bg" aria-hidden="true"></div>

    <div class="login-box">
      <div class="login-header">
        <img :src="env.APP_LOGO" alt="logo" class="logo" />
        <h1 class="title">{{ env.APP_TITLE }}</h1>
        <p class="desc">基于 Vue3 + Vite + Ant Design Vue 的后台管理系统</p>
      </div>

      <AForm
        :model="loginForm"
        :rules="rules"
        @finish="handleLogin"
        class="login-form"
      >
        <AFormItem name="username">
          <AInput
            v-model:value="loginForm.username"
            size="large"
            placeholder="用户名: admin"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </AInput>
        </AFormItem>

        <AFormItem name="password">
          <AInputPassword
            v-model:value="loginForm.password"
            size="large"
            placeholder="密码: 123456"
          >
            <template #prefix>
              <LockOutlined />
            </template>
          </AInputPassword>
        </AFormItem>

        <AFormItem>
          <AButton
            type="primary"
            html-type="submit"
            size="large"
            :loading="loading"
            block
          >
            登录
          </AButton>
        </AFormItem>
      </AForm>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined, BulbOutlined, BulbFilled } from '@ant-design/icons-vue'
import { useUserStore, useAppStore } from '@/store'
import { getEnv } from '@/utils/env'

const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()
const env = getEnv()

const loading = ref(false)
const loginForm = reactive({
  username: 'admin',
  password: '123456'
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

// 切换主题
const toggleTheme = () => {
  appStore.toggleTheme()
}

const handleLogin = async () => {
  try {
    loading.value = true
    const success = await userStore.login(loginForm)
    
    if (success) {
      message.success('登录成功')
      // 获取用户信息
      await userStore.getUserInfo()
      // 跳转到首页
      router.push('/')
    } else {
      message.error('登录失败')
    }
  } catch (error) {
    console.error('登录失败：', error)
    message.error('登录失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // 天蓝主题渐变基底
  background: radial-gradient(1200px 800px at 20% -10%, rgba(56, 189, 248, 0.38), transparent 60%),
              radial-gradient(900px 700px at 85% 120%, rgba(56, 189, 248, 0.32), transparent 60%),
              linear-gradient(135deg, #38bdf8 0%, #60a5fa 55%, #38bdf8 100%);

  // 扫光效果（提升科技感与层次）
  &::before {
    content: "";
    position: absolute;
    inset: -20% -40% -20% -40%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 60%);
    filter: blur(8px);
    transform: translateX(-65%) rotate(8deg);
    animation: sweep 9s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
  }

  // 科技感网格与光晕层
  .tech-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    // 动态网格
    &::after {
      content: "";
      position: absolute;
      inset: -50%;
      background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0/96px 96px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0/96px 96px;
      transform: rotate(2deg);
      animation: grid-move 22s linear infinite;
      mix-blend-mode: overlay;
      opacity: .25;
    }

    // 旋转光晕
    &::before {
      content: "";
      position: absolute;
      inset: -10% -10% -10% -10%;
      background: radial-gradient(600px 600px at 15% 20%, rgba(59, 130, 246, 0.35), transparent 60%),
                  radial-gradient(500px 500px at 85% 70%, rgba(56, 189, 248, 0.28), transparent 60%),
                  conic-gradient(from 0deg at 50% 50%, rgba(14, 165, 233, .08), transparent 40%, rgba(99, 102, 241, .08), transparent 75%, rgba(14, 165, 233, .08));
      filter: blur(2px) saturate(115%);
      animation: rotate-glow 36s linear infinite;
      mix-blend-mode: screen;
    }
  }

  @keyframes grid-move {
    0% { transform: translate3d(0, 0, 0) rotate(2deg); }
    100% { transform: translate3d(-96px, -96px, 0) rotate(2deg); }
  }

  @keyframes rotate-glow {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1); }
  }

  @keyframes sweep {
    0% { transform: translateX(-65%) rotate(8deg); }
    100% { transform: translateX(65%) rotate(8deg); }
  }

  .theme-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.2);

    &:hover {
      background: rgba(255, 255, 255, 0.28);
      transform: scale(1.1);
    }
  }

  .login-box {
    width: 400px;
    padding: 40px;
    background: var(--bg-color);
    border-radius: 8px;
    box-shadow: 0 4px 24px var(--shadow-color);
    position: relative;
    z-index: 1;

    .login-header {
      text-align: center;
      margin-bottom: 32px;

      .logo {
        width: 60px;
        height: 60px;
        filter: drop-shadow(0 0 10px rgba(14, 165, 233, .35));
      }

      .title {
        margin: 16px 0 8px;
        font-size: 28px;
        font-weight: 600;
        color: var(--text-color);
      }

      .desc {
        margin: 0;
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }

    .login-form {
      :deep(.ant-form-item) {
        margin-bottom: 24px;
      }

      // 输入框前缀图标颜色适配亮/暗主题
      :deep(.ant-input-affix-wrapper .ant-input-prefix .anticon) {
        color: var(--text-color-secondary);
        transition: color .2s ease;
      }
      :deep(.ant-input-affix-wrapper:hover .ant-input-prefix .anticon) {
        color: var(--text-color);
      }
    }
  }
}

// 暗夜模式下，优化切换按钮与网格明度
[data-theme='dark'] {
  .login-container {
    background: radial-gradient(1200px 800px at 20% -10%, rgba(37, 99, 235, 0.32), transparent 60%),
                radial-gradient(900px 700px at 85% 120%, rgba(2, 132, 199, 0.24), transparent 60%),
                linear-gradient(135deg, #0b224a 0%, #0b172e 60%, #0b224a 100%);

    .tech-bg::after { opacity: .45; }
    .theme-toggle {
      color: rgba(255, 255, 255, 0.95);
      background: rgba(0, 0, 0, 0.25);
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.25);
    }
  }
}
</style>
